<template>
	<view class="content">
		<view class="header_box">
			<view class="title_box">我的推广
			</view>
			<view class="goBack_box" @click="goBack"></view>
		</view>
		<template v-if="isStatus == -1">

			<view class="big_box" v-if="cdsqShow">
				<view class="sm_box">
					<view class="title_box">加入推广员</view>
					<view class="mid_box">您现在还不是推广员，请先提交申请</view>
					<view class="bot_box" @click="applyBtn">立即申请</view>
				</view>
			</view>
			<view class="shenqing_box" v-if="shenqingShow">
				<view class="shenqing_sm_box">
					<view class="title_box">请填写申请信息</view>
					<view class="ipt_box">
						<!-- name -->
						<view class="name_box">
							<view class="one_box">姓名</view>
							<view class="two_ipt_box">
								<input placeholder="请输入姓名" v-model="nameValue">
							</view>
						</view>
						<!-- phone -->
						<view class="phone_box">
							<view class="one_phone_box">手机号</view>
							<view class="two_phone_ipt_box">
								<input placeholder="请输入手机号" v-model="phoneValue">
							</view>
						</view>
					</view>
					<!-- 协议 -->
					<view class="tab_xieyi" @tap="goCheck">
						<image :src="iconurl + '/static/index/pzselect3.png'" v-if="xieyiStu == false"></image>
						<image :src="iconurl + '/static/index/pzselect4.png'" v-else></image>
						<view class="">我已阅读并了解
							<text style="color:#A26B2F;" @click="shuomingBtn">《推广员协议及规则》</text>
						</view>
					</view>
					<!-- 立即申请 -->
					<view class="applyButton_box" @click="enterApply">
						立即申请
					</view>
				</view>
			</view>
		</template>
		<template v-if="isStatus == 0 || auditShow == true">
			<view style="height:80rpx;"></view>
			<view class="audit_box">
				<view class="jindutiao_box">
					<view class="step-bar">
						<view class="step-item" :class="{ active: currentStep >= 1 }">
							<view class="step-number"></view>
							<view class="step-text">填写信息</view>
						</view>
						<view class="line"></view>
						<view class="step-item" :class="{ active: currentStep >= 2 }">
							<view class="step-number"></view>
							<view class="step-text">审核</view>
						</view>
						<view class="line1"></view>
						<view class="step-item" :class="{ active: currentStep >= 3 }">
							<view class="step-number"></view>
							<view class="step-text">成功</view>
						</view>
					</view>
					<view class="icon_box">
						<image src="https://mh.qingfentool.vip/upload/image/20230526/579cffbfd2513ddc45d0c7e0c00f7227.png"
							mode="scaleToFill" />
					</view>
					<view class="text">1-2天内反馈审核结果</view>
				</view>
			</view>
		</template>
	</view>
</template>
<script>
export default {
	data() {
		return {
			iconurl: this.$configs.urls,
			isStatus: '',//是否为推广员 -1：啥也不是 0:审核中 1：是推广员 
			auditShow: false,//审核中 
			shenqingShow: false,//申请输入框
			cdsqShow: true,//初始申请框
			xieyiStu: false,//协议
			phoneValue: '',//手机号
			nameValue: '',//姓名
			currentStep: 2 // 当前步骤
		}
	},
	onLoad(e) {
		//console.log(e)
		this.isStatus = e.isStatus//是否为推广员 -1：啥也不是 0:审核中 1：是推广员 
	},
	methods: {
		shuomingBtn() {
			uni.navigateTo({
				url: '/userPage/user/agreement?id=' + 113
			});
		},
		// 立即申请（第一层）
		applyBtn() {
			this.shenqingShow = true
			this.cdsqShow = false
		},
		goBack() {
			uni.navigateBack()
		},
		// 立即申请（第二层）
		enterApply() {
			if (!this.xieyiStu) {
				uni.showToast({
					title: '请先阅读协议',
					icon: 'none'
				})
				return
			}
			if (!(/^1[3456789]\d{9}$/.test(this.phoneValue))) {
				uni.showToast({
					title: '手机号码格式不正确',
					icon: 'none'
				})
				return
			}
			let data = {
				username: this.nameValue,
				phone: this.phoneValue,
			}
			this.$Request.post(this.$api.user.apply, data).then(res => {
				if (res.code == 0) {
					this.shenqingShow = false
					this.auditShow = true
				}
			})


		},
		// 同意协议
		goCheck() {
			this.xieyiStu = !this.xieyiStu;
		},

	}
}
</script>
<style lang="scss" scoped>
.content {
	width: 100vw;
	height: 100vh;
	background-image: url('https://mh.qingfentool.vip/upload/image/20230529/3127bbcdd560164244f6db036ae9182d.png');
	background-size: 100% 100%;

	.header_box {
		width: 96%;
		height: 150rpx;
		margin: auto;
		position: relative;

		.title_box {
			width: 100%;
			height: 50rpx;
			text-align: center;
			position: absolute;
			bottom: 0;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 50rpx;
		}

		.goBack_box {
			width: 20rpx;
			height: 30rpx;
			background-image: url('https://mh.qingfentool.vip/upload/image/20230526/dd6523b0eaf3e1b52f0875840e93b5ae.png');
			background-size: 100% 100%;
			opacity: 1;
			position: absolute;
			bottom: 10rpx;
			left: 10rpx;
		}
	}

	// 状态-1：啥也不是
	.big_box {
		width: 630rpx;
		height: 700rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin: auto;
		position: relative;

		.sm_box {
			width: 630rpx;
			height: 474rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			background-image: url('https://mh.qingfentool.vip/upload/image/20230526/2532fdcf9ec664b62ffbe65cc6d696d3.png');
			background-size: 100% 100%;
			opacity: 1;
			margin: auto;
			position: absolute;
			bottom: 0;
			padding-top: 52rpx;


			.title_box {
				width: 100%;
				height: 58rpx;
				line-height: 58rpx;
				text-align: center;
				font-size: 40rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #A26B2F;
				line-height: 58rpx;
				margin-bottom: 92rpx;
			}

			.mid_box {
				width: 100%;
				height: 44rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #3D3D3D;
				line-height: 44rpx;
				text-align: center;
				margin-bottom: 96rpx;
			}

			.bot_box {
				width: 262rpx;
				height: 66rpx;
				background: #FFB02E;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				opacity: 1;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 66rpx;
				text-align: center;
				margin: auto;
			}
		}

	}

	.shenqing_box {
		width: 100%;
		height: 800rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		margin: auto;
		position: relative;

		.shenqing_sm_box {
			width: 690rpx;
			height: 550rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			background-image: url('https://mh.qingfentool.vip/upload/image/20230526/e267fa22d47b44c63c79ffc9f1e7d934.png');
			background-size: 100% 100%;
			opacity: 1;
			position: absolute;
			left: 0;
			right: 0;
			margin: auto;
			bottom: 0;
			padding-top: 52rpx;

			.title_box {
				width: 100%;
				height: 58rpx;
				line-height: 58rpx;
				text-align: center;
				font-size: 40rpx;
				font-family: Source Han Sans CN-Bold, Source Han Sans CN;
				font-weight: 700;
				color: #A26B2F;
				line-height: 58rpx;
				margin-bottom: 34rpx;

			}

			.ipt_box {
				width: 532rpx;
				height: 260rpx;
				margin: auto;

				.name_box {
					width: 100%;
					height: 120rpx;
					margin-bottom: 10rpx;

					.one_box {
						width: 100%;
						height: 44rpx;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #3D3D3D;
						line-height: 44rpx;
						margin-bottom: 6rpx;
					}

					.two_ipt_box {
						width: 100%;
						height: 64rpx;
						padding: 0 6rpx;

						// background: rgba(0, 0, 0, 0.31);
						// border-radius: 6rpx 6rpx 6rpx 6rpx;
						// border: 2rpx solid #FED187;
						input {
							width: 100%;
							height: 64rpx;
							padding: 0 6rpx;
							background: rgba(0, 0, 0, 0.31);
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							border: 2rpx solid #FED187;
							color: #fff;
							padding-left: 10rpx;
						}


					}
				}

				.phone_box {
					width: 100%;
					height: 120rpx;

					// background-color: aqua;
					.one_phone_box {
						width: 100%;
						height: 44rpx;
						font-size: 30rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #3D3D3D;
						line-height: 44rpx;
						margin-bottom: 6rpx;
					}

					.two_phone_ipt_box {
						width: 100%;
						height: 64rpx;
						padding: 0 6rpx;

						// background: rgba(0, 0, 0, 0.31);
						// border-radius: 6rpx 6rpx 6rpx 6rpx;
						// border: 2rpx solid #FED187;
						input {
							width: 100%;
							height: 64rpx;
							padding: 0 6rpx;
							background: rgba(0, 0, 0, 0.31);
							border-radius: 6rpx 6rpx 6rpx 6rpx;
							border: 2rpx solid #FED187;
							color: #fff;
							padding-left: 10rpx;
						}

					}
				}
			}

			.tab_xieyi {
				width: 100%;
				height: 32rpx;
				line-height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 600;
				margin-bottom: 22rpx;

				image {
					width: 32rpx;
					height: 32rpx;
				}

				view {
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3D3D3D;
					padding-left: 20rpx;
				}
			}

			.applyButton_box {
				width: 262rpx;
				height: 66rpx;
				background: #FFB02E;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 66rpx;
				margin: auto;
				text-align: center;
			}
		}
	}

	// 审核中
	.jindutiao_box {
		width: 94%;
		height: 100rpx;
		margin: auto;

		.step-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			margin-bottom: 132rpx;
		}

		.line {
			width: 50%;
			height: 2rpx;
			background-color: #FFAA2A;
			position: absolute;
			left: 43rpx;
			top: 20rpx;
		}

		.line1 {
			width: 50%;
			height: 2rpx;
			background-color: #FFAA2A;
			position: absolute;
			right: 43rpx;
			top: 20rpx;
		}

		.step-item {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.step-number {
			width: 38rpx;
			height: 38rpx;
			border-radius: 50%;
			background: rgba(0, 0, 0, 0.1);
			box-shadow: inset 0rpx 0rpx 14rpx 0rpx #FFAA2A;
			opacity: 1;
			border: 2rpx solid #FFAA2A;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 10rpx;
		}

		.step-text {
			font-size: 26rpx;
			color: #fff;
		}

		.active .step-number {
			background-color: #FFAA2A;
		}

		.icon_box {
			width: 502rpx;
			height: 395rpx;

			// background-image: url('https://mh.qingfentool.vip/upload/image/20230526/579cffbfd2513ddc45d0c7e0c00f7227.png');
			background-size: 100% 100%;

			opacity: 1;
			margin: auto;
			margin-bottom: 20rpx;
		}

		.text {
			width: 100%;
			height: 40rpx;
			line-height: 40rpx;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
		}
	}
}
</style>